<template>
  <div class="traffic-lights">
    <div class="light" v-for="item in data" :key="item.id" :style="{backgroundColor:item.color}"
         @click="onClick(item.event)"
         @mouseover="isHover = true"
         @mouseleave="isHover = false">
      <div v-show="isHover" class="icon-child" :style="{backgroundImage:`url(${item.hover})`}">

      </div>
    </div>
  </div>
</template>

<script lang="js">
import { ref} from "vue";


 const ipc=require('electron').ipcRenderer

export default {
  name: "TrafficLight",
  setup() {
    const isHover = ref()
    const data = [
      {
        id: 1,
        color: 'red',
        event: 'close',
        hover: "../src/assets/icons/close.svg"
      },
      {
        id: 2,
        color: 'yellow',
        event: 'zoom-out',
        hover: "../src/assets/icons/zoom-out.svg"
      },
      {
        id: 3,
        color: 'green',
        event: 'zoom-in',
        hover: "../src/assets/icons/zoom-in.svg"
      }
    ]



    return {isHover, data}
  },
  methods: {
    onClick(e) {
      console.log(e);
      if (e === "close") {
        ipc.send("window-all-closed")

      }else if (e==='zoom-out') {
        ipc.send("window-all-max")
      }
      else if (e==='zoom-in') {
        ipc.send("window-all-min")
      }
    }
  }

}
</script>

<style lang="less" scoped>
.traffic-lights {
  width: 100px;
  display: flex;
  padding: 10px 0;
  align-items: center;
  justify-content: space-evenly;

  .light {
    width: 18px;
    height: 18px;
    margin-top: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .light:hover {
    cursor: pointer;
  }

  .icon-child {
    width: 12px;
    height: 12px;
    background-size: 12px, 12px;
    background-position: center;
  }

}
</style>